<!--  -->
<template>
  <div id="total">
        <v-title :text="'服务管理'"/>
    <el-row style="display:flex">
    <el-col :min-width="12">
      <el-collapse id="listCon" v-model="activeNames">
        <el-collapse-item title="存储服务管理" name="1">
          <div v-for="(key, i) in unitData.storageService">
            <ServiceUnit :unitData="key" />
          </div>
        </el-collapse-item>
        <el-collapse-item title="计算服务管理" name="2">
          <div v-for="(key, i) in unitData.computeService">
            <ServiceUnit :unitData="key" />
          </div>
        </el-collapse-item>
        <el-collapse-item title="画像服务管理" name="3">
          <div v-for="(key, i) in unitData.profileService">
            <ServiceUnit :unitData="key" />
          </div>
        </el-collapse-item>
        <el-collapse-item title="功能模块管理" name="4">
          <div v-for="(key, i) in unitData.funcService">
            <ServiceUnit :unitData="key" />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-col>

    <el-col :min-width="10">
      <Pic id="pic"/>
    </el-col>
    </el-row>
  </div>
</template>

<script>
import ServiceUnit from "@/components/Platform/ServiceUnit"
import Pic from "@/components/Platform/Pic"
import Title from '@/components/Title/Title'
import Subtitle from '@/components/Title/Subtitle'
export default {
  data() {
    return {
      unitData: {
        storageService: [
        ],
        computeService: [
        ],
        profileService: [
        ],
        funcService: [
        ],
      },
      activeNames: ["1", "2", "3", "4"],
    };
  },

  components: {
    ServiceUnit: ServiceUnit,
    Pic: Pic,
        "v-title": Title,
    "v-subtitle": Subtitle,
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$axios({
        url: "http://"+this.$config.server_ip+":5003/query_platform",
        method: "get",
      }).then(res => {
        console.log(res.data);
        this.unitData = res.data;
      })
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
#pic {
  margin-left: 50px;
  margin-top: 60px;
}
</style>
